<template>
    <div ref="dropDown" class="drop-down-filter">
        <div @click="showList"><span>{{selectedText}}</span><i ref="icon" class="glyphicon glyphicon-chevron-down"></i></div>
        <ul v-show="isShow">
            <li v-for="(item,i) in data" :key="i" @click="selectedHandle(item)">{{item.name}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    props:['value','data'],
    data(){
        return {
            isShow:false,
            selectedText:'',
        }
    },
    methods:{
        selectedHandle(val){
            this.selectedText = val.name;
            this.hideList();
            this.$emit('get-result',val.value);
        },
        showList(){
            this.isShow=true;
            $(this.$refs.icon).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
        },
        hideList(){
            this.isShow=false;
            $(this.$refs.icon).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
        }
    },
    mounted(){
        if(!this.value&&this.data){
            this.selectedText = this.data[0].name || '';
        }
    }
}
</script>

<style lang="scss">
.drop-down-filter {
    position: relative;
    cursor: pointer;
    min-width: 75px;
    &>div {
        height: 26px;
        line-height: 26px;
        width:100%;
        display: inline-block;
        position: relative;
        padding: 0 10px;
        text-align: left;
        border: 1px solid transparent;
        &>i {
            position: absolute;
            right:5px;
            top:5px;
        }
    }
    &:hover {
        div {
            box-shadow: 0 0 10px rgba(0,0,0,.12);
            // border: 1px solid #f5f5f5;
            border-radius: 3px;
        }
    }
    &>ul {
        width:100%;
        z-index: 2;
        box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.12);
        // border: 1px solid #f5f5f5;
        border-top: 0;
        border-top:none;
        position: absolute;
        top:28px;
        margin:0;
        padding:0;
        background: #fff;
        list-style: none;
        max-height: 190px;
        overflow: auto;
        color:#333 !important;
        li {
            padding: 0 10px;
            text-align: left;
            line-height: 26px;
            cursor: pointer;
            word-break: keep-all;
            &:hover {
                color:#409eff;
            }
        }
    }
}
</style>
